<template>
  <div>
    <!-- <HmDialog>
      <hm-login></hm-login>
    </HmDialog>

    <HmDialog>
      <p>我是一个p标签</p>
    </HmDialog>

    <HmDialog> </HmDialog> -->

    <HmDialog>
      <template v-slot:header>
        <h3>我是标题</h3>
      </template>

      <template v-slot:default>
        <div>我是主体内容</div>
      </template>

      <template v-slot:footer>
        <h6>我是footer</h6>
      </template>
    </HmDialog>
  </div>
</template>

<script>
//1、插槽干啥的？
//封装一个组件的时候，如果组件内部的部分结构不确定，需要调用组件的时候动态传入结构，使用插槽slot进行占位

//如果使用组件的时候没有为插槽提供内容，可以在组件的sLot组件中间提供默认内容<sLot>提供默认的展示内容
//给插槽起名字

//组件内部多个结构不确定，可以提供多个slot进行占位，同时每一个slot标签起一个名字
//使用组件的时候通过v-slot动态指定当前结构传递给组件内部的哪个插槽结构

import HmLogin from './components/hm-login.vue'
import HmDialog from './components/hm-dialog.vue'
export default {
  components: { HmLogin, HmDialog },
}
</script>

<style></style>
